<template>
	<div>
		<!-- 内容 -->
		<transition name="fade" mode="out-in" appear>
			<el-row>
				<el-col :span="8">
					<h3>会员基本信息</h3>
					<table border="1">
						<tr>
							<th>属性</th>
							<th>详情</th>
						</tr>
						<tr v-for="item in formUsersText">
							<td>{{item.text}}</td>
							<td>{{formUsers[item.field]}}</td>
						</tr>
					</table>
				</el-col>
				<el-col :span="8">
					<h3>车辆详情</h3>
					<el-row v-for='i in formCars'>
						<el-col :span="24" v-for='item in formCarsText'>
							<div class="grid-content bg-purple-dark">
								{{item.text}}: {{i[item.field]}}
							</div>
						</el-col>
						<h4>行驶证</h4>
						<el-col :span="12">
							<img :src="i.driving_papers_1" />
						</el-col>
						<el-col :span="12">
							<img :src="i.driving_papers_2" />
						</el-col>
					</el-row>
				</el-col>
				<el-col :span="8">
					<h3>账号管理</h3>
					<el-row>
						<el-col :span="24" v-for='item in formAccountText'>
							<div class="grid-content bg-purple-dark">
								{{item.text}}: {{formUsers[item.field]}}
							</div>
						</el-col>
					</el-row>
					<el-row>
						<el-button type="primary">重置密码</el-button>
					</el-row>
				</el-col>
			</el-row>
		</transition>
	</div>
</template>

<script>
	import http from 'assets/js/http.js'

	export default {
		components: {},
		data() {
			return {
				config: {},
				id: '',
				formUsers: {},
				formCars: [],
				value: [],
				formUsersText: [{
						text: '用户ID',
						field: 'id',
					},
					{
						text: '用户名',
						field: 'username',
					},
					{
						text: '用户头像',
						field: 'photo',
					},
					{
						text: '性别',
						field: 'sex',
					},
					{
						text: '联系方式',
						field: 'contact_number',
					},
					{
						text: '银行卡号',
						field: 'id',
					},
					{
						text: '微信ID',
						field: 'wx',
					},
					{
						text: 'QQ',
						field: 'qq',
					},
					{
						text: '注册时间',
						field: 'regist_time',
					},
					{
						text: '会员等级',
						field: 'dj_name',
					},
					{
						text: '总积分',
						field: 'total_integral',
					},
					{
						text: '当前积分',
						field: 'integral',
					},
					{
						text: '总红包金额',
						field: 'id',
					},
					{
						text: '已提现红包金额',
						field: 'have_withdrawal_money',
					},
					{
						text: '当前红包',
						field: 'money',
					}

				],
				formCarsText: [{
						text: '车主姓名',
						field: 'name',
					},
					{
						text: '车型车号',
						field: 'vehicle_type',
					},
					{
						text: '车牌号码',
						field: 'number',
					},
					{
						text: '身份证号',
						field: 'identity',
					},
					{
						text: '爱车品牌',
						field: 'vehicle_brand',
					}
				],
				formAccountText: [{
						text: '用户账号',
						field: 'username',
					},
					{
						text: '密码',
						field: 'vehicle_type',
					}
				]

			}
		},
		created() {
			this.id = this.$route.params.id
			const data = {
				'uid': this.id
			}
			this.$watch('$route', {
				deep: true,
				handler: function() {
					this.id = this.$route.params.id
					this.apiPost('AdminApi/userList/User_select', data).then(res => {
						this.handelResponse(res, data => {
							console.log('会员详情data', data)
							this.formUsers = data.users
							this.formCars = data.cars
							console.log('this.formCars', this.formCars)
						})
					})
				}
			})
			this.apiPost('AdminApi/userList/User_select', data).then(res => {
				this.handelResponse(res, data => {
					console.log('会员详情data', data)
					this.formUsers = data.users
					this.formCars = data.cars
					console.log('this.formCars', this.formCars)

				})
			})

		},
		methods: {

		},
		mixins: [http]
	}
</script>

<style scoped>
	table {
		border-collapse: collapse;
		/*关键代码*/
	}
</style>